<template>
	<div class="tags">
		<div class="tag-icon" @click="tabScroll('left')">
			<i class="el-icon-arrow-left"></i>
		</div>
		<div class="scroll-bar" ref="tag1">
			<div class="flex-content" ref="tag2" :style="'left:'+flexContentLeft+'px'">
				<el-tag class="scrollbar-demo-item" @click="submit" effect="dark" :type="showHome?'primary':'info'">数据统计</el-tag>
				<el-tag closable :type="showHome?'info':item.showTag?'primary':'info'" effect="dark" @close="tagClose(item)"
					@click="tagClick(item)" v-for="item in tagArry" :key="item" class="scrollbar-demo-item">
					{{item.name}}
				</el-tag>
			</div>
		</div>
		<div class="tag-icon" @click="tabScroll('right')">
			<i class="el-icon-arrow-right"></i>
		</div>
	</div>
</template>
<script setup>
	import {
		ref,
		onMounted,
		watch,
		defineEmits
	} from 'vue'
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import store from '@/common/utils/store'
	let tag1 = ref(null),
		showHome = ref(false),
		tag2 = ref(null),
		showTag = ref(true),
		route = useRoute(),
		router = useRouter(),
		flexContentLeft = ref(0),
		tagArry = ref([]),
		routePath = ref(null),
		emit = defineEmits(),
		submit = () => { //首页
			showHome.value = true
		},
		tabScroll = (str) => {
			if (str == 'right') {
				if (tag1.value.clientWidth <= tag2.value.clientWidth) {
					if (flexContentLeft.value + tag2.value.clientWidth > tag1.value.clientWidth) {
						flexContentLeft.value = flexContentLeft.value - 100
					}
				}
			} else {
				if (flexContentLeft.value < 0) {
					flexContentLeft.value = flexContentLeft.value + 100
				}
			}
		},
		tagClick = options => {
			showHome.value = false
			emit('menusWatch', options)
			router.push(options.path)
		},
		tagClose = options => {
			let array = []
			tagArry.value.forEach(item => {
				if (options.name != item.name) {
					array.push(item)
				}
			})
			if (array.length) {
				if (options.path == routePath.value) {
					router.push(array[array.length - 1].path)
				}
			}
			store.breadcrumbTag = tagArry.value = array
		},
		tagRefresh = () => {
			let array = []
			if (store.breadcrumbTag != '' && store.breadcrumbTag != undefined) {
				store.breadcrumbTag.forEach(item => {
					if (item.path == routePath.value) {
						item.showTag = true
					} else {
						item.showTag = false
					}
					array.push(item)
				})
			}
			tagArry.value = array
		}

	watch(route, newValue => {
		routePath.value = newValue.fullPath
		tagRefresh()
	}, {
		immediate: true
	})
	onMounted(() => {
		window.onresize = () => {
			if (tag1.value.clientWidth <= tag2.value.clientWidth) {
				showTag.value = false
			} else {
				showTag.value = true
			}
		}
	})
</script>
<style lang="scss" scoped>
	.tags {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10px 0;
		position: relative;

		.scroll-bar {
			position: absolute;
			left: 20px;
			right: 20px;
			top: -1px;
			height: 35px;
			overflow: hidden;

			.flex-content {
				display: flex;
				position: absolute;
				top: 0;
				transition: all .3s;

				.scrollbar-demo-item {
					margin-right: 5px;
					cursor: pointer;
				}
			}
		}

		.tag-icon {
			width: 15px;
			height: 30px;
			background-color: #fff;
			cursor: pointer;
			border-radius: 2px;
			transition: all .3s;
			display: flex;
			align-items: center;
			justify-content: center;

			&:hover {
				background-color: #F2F2F2;
			}
		}
	}
</style>
